import React from 'react'
import { connect } from 'dva'
import { Row, Col, Alert, Modal, Table, Popover, Form, Input, Spin,Pagination } from 'antd'
import { Page } from 'components';
import DistributorCard from './DistributorCard';
import DistributorFormModal from './DistributorFormModal';
import copy from 'copy-to-clipboard';
import Pic4Qr from './Pic4Qr/Pic4Qr';

function Dashboard({ dashboard, app, dispatch, loading }) {
  const { info, urlVisible, distributorVisible, currentDistributor } = dashboard
  const { user } = app
  const showUrlModal = (option, record) => {
    dispatch({
      type: 'dashboard/getInfoSuccess',
      payload: {
        urlVisible: option
      }
    })
    if (!_.isEmpty(record)) {
      dispatch({
        type: 'dashboard/getInfoSuccess',
        payload: {
          currentDistributor: record
        }
      })
    }
  }
  const updateAddress = (id, option) => {
    dispatch({
      type: 'dashboard/updateAddress',
      payload: {
        id: id,
        params: option
      }
    })
  }
  const showDistributorModal = (option, record) => {
    dispatch({
      type: 'dashboard/getInfoSuccess',
      payload: {
        distributorVisible: option
      }
    })
    if (!_.isEmpty(record)) {
      dispatch({
        type: 'dashboard/getInfoSuccess',
        payload: {
          currentDistributor: record
        }
      })
    }
  }

  const columns = [
    {
      title: '商城名称',
      dataIndex: 'name',
      key: 'name',
    },
    {
      title: '商城URL',
      dataIndex: 'mallUrl',
      key: 'mallUrl',
      render: (text, record, index) => (
        <a target="view_window" href={record.mallUrl + '?_storeCode=' + Buffer.from(currentDistributor.storeCode).toString('base64')
      }>{record.mallUrl + '?_storeCode=' + Buffer.from(currentDistributor.storeCode).toString('base64')}
      </a>
      )
    }, {
      title: '二维码',
      dataIndex: 'id',
      key: 'id',
      render: (text, record, index) => (
        <Pic4Qr value={record.mallUrl + '?_storeCode=' + Buffer.from(currentDistributor.storeCode).toString('base64')}/>
      )
    }, {
      title: '操作',
      key: 'action',
      render: (text, record, index) => {
        return (
          <Popover content="复制成功" trigger="click">
            <a onClick={() => {
              copy(record.mallUrl + '?_storeCode=' + Buffer.from(currentDistributor.storeCode).toString('base64'))
            }}>复制 </a>
          </Popover>

        )
      }
    }
  ]
  const tableProps = {
    dataSource: currentDistributor.businessMalls,
    pagination: false,
  }
  const distributorModalProps = {
    title: "门店地址",
    visible: distributorVisible,
    onCancel: showDistributorModal,
    onOk: updateAddress,
    item: currentDistributor,
    loading: loading.global
  }
  const distributorCards = info.distributorSummaries && info.distributorSummaries.map((item, key) =>
    (<Col key={key} lg={6} md={12}><DistributorCard {...item} distributorVisible={distributorVisible} urlVisible={urlVisible} showUrlModal={showUrlModal} showDistributorModal={showDistributorModal} dispatch={dispatch} /></Col>))

  const onChange =(page, pageSize)=>{
    console.log(page, pageSize)
  }
    return (
    <Spin spinning={loading.global} >
      <Page >
        <Modal width={1000} footer={false} title="专属商城链接" visible={urlVisible} onCancel={() => showUrlModal(false)}>
          <Table {...tableProps}
            columns={columns}
            size="middle"
            rowKey={record => record.id} />
        </Modal>
        <DistributorFormModal {...distributorModalProps} />
        {(user && user.id) &&
          <div>
            <Row gutter={24}>
            {distributorCards}
          </Row>
          </div>}
      </Page>
    </Spin>
  )
}

export default connect(({ dashboard, app, loading }) => ({ dashboard, app, loading }))(Dashboard)
